import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast, Swiper, NoticeBar, List, Image, Modal, Divider } from 'antd-mobile'
import styles from "./home.module.scss"
import { GRID_INFO } from './utils/GRID_INFO'
import { RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import api from "../../api"
import utils from '../../untils/tool'
export default function home() {
    const navigate = useNavigate()
    const [rotograph, setRotograph] = useState([])
    const [list, setList] = useState([])
    function itemChange(item) {
        if (item.route) {
            navigate(item.route)
        } else {
            item.click && item.click()
        }
    }
    //轮播图
    function getRotographList() {
        api.getRotographList().then(res => {
            setRotograph(res.list)
        })
    }
    //医院公告
    function getHospitalAnnouncementList() {
        api.getHospitalAnnouncementList().then(res => {
            setList(res.list)
        })
    }

    useEffect(() => {
        getRotographList()
        getHospitalAnnouncementList()
    }, [])
    return (
        <div className={styles.home}>
            <Swiper autoplay autoplayInterval={2000} loop>
                {
                    rotograph.map(item => {
                        return (
                            <Swiper.Item key={item.id} onClick={() => {
                                if (item.address.startsWith("http")) window.open(item.address, "_black")
                                else navigate(item.address)
                            }}>
                                <img className={styles.home_img} src={item.image}></img>
                            </Swiper.Item>
                        )
                    })
                }
            </Swiper>
            <NoticeBar content="欢迎您使用保定胸外医院挂号系统，该系统正在完善，敬请期待！" color='info' />
            <div className={styles.home_grid}>
                {
                    GRID_INFO.map(item => {
                        return (
                            <div key={item.id} style={{ textAlign: 'center' }} onClick={() => itemChange(item)}>
                                <img src={item.icon}></img>
                                <div className={styles.home_grid_title}>{item.name}</div>
                            </div>
                        )
                    })
                }
            </div>
            <div className={styles.announcement}>
                <div className={styles.announcement_topleft} />
                <div className={styles.announcement_topright}>医院公告</div>
                <div style={{ float: "right" }} onClick={() => {
                    navigate("/home/hospitalAnnouncement")
                }}>
                    查看更多 <RightOutline />
                </div>
                <List>
                    {list.map(item => (
                        <List.Item
                            onClick={() => {
                                navigate(`/home/hospitalAnnouncementDesc/${item.id}`)
                            }}
                            key={item.id}
                            prefix={
                                <Image
                                    src={item.image}
                                    fit='cover'
                                    width={130}
                                    height={130}
                                />
                            }
                            description={utils.getContent(item.content)}
                        >
                            {item.title}
                        </List.Item>
                    ))}
                </List>
            </div>
        </div>
    )
}
